AJAX - Aplicação Tipica
Importante :
1-O request só pode ser enviado para uma página local de um servidor.
2-É proibido acessar sites externos ao servidor pelo request sem ser para um servidor web por motivos de segurança.
3-Se você esta usando um servidor as urls podem ser relativas ao site mas se forem páginas sem um servidor as urls tem que ser absolutas, ou seja, com as pastas de onde o arquivo se encontra. Contudo, devido a politica de segurança do sistema operacional uma página web qualquer não pode acessar um arquivo local na máquina e por este motivo a requisição ajax dará erro de segurança por acesso negado.

Na caixa abaixo deverá aparecer os dados do arquivo 02-dados1.json,02-dados2.json,02-dados3.json assim que o botão acima da caixa for pressionado.
O dado recebido será exibido exatamente como foi enviado pelo servidor, sem qualquer tratamento.

Clique nos linka abaixo (Página 1, Página 2, Página 3) para efetuar o teste:



Meus Animais de Estimação





Código:

    <script><br />
        var request = false;<br />
        try {<br />
            request = new XMLHttpRequest();<br />
        } catch (trymicrosoft) {<br />
            try {<br />
                request = new ActiveXObject("Msxml2.XMLHTTP");<br />
            } catch (othermicrosoft) {<br />
                try {<br />
                    request = new ActiveXObject("Microsoft.XMLHTTP");<br />
                } catch (failed) {<br />
                    request = false;<br />
                }<br />
            }<br />
        }<br />
<br />
        if (!request)<br />
            alert("Erro ao inicializar o XMLHttpRequest!");<br />
<br />
        function ObterPag1() {<br />
            var url = "05-dados1.json";<br />
            request.open("GET", url, true);<br />
            request.onreadystatechange = updatePage;<br />
            request.send(null);<br />
        }<br />
<br />
        function ObterPag2() {<br />
            var url = "05-dados2.json";<br />
            request.open("GET", url, true);<br />
            request.onreadystatechange = updatePage;<br />
            request.send(null);<br />
        }<br />
<br />
        function ObterPag3() {<br />
            var url = "05-dados3.json";<br />
            request.open("GET", url, true);<br />
            request.onreadystatechange = updatePage;<br />
            request.send(null);<br />
        }<br />
<br />
        function updatePage() {<br />
            if (request.readyState == 4) {        /* navigation completed */<br />
                if (request.status == 200) {    /* 0 = erro */<br />
                    var response = request.responseText;<br />
                    document.getElementById("Texto").value = response;<br />
                } else<br />
                    alert("Erro de acesso"); // + request.status vem sempre zero quando dá erro<br />
                //alert("o texto de retorno é " + request.responseText);<br />
            }<br />
        }<br />
<br />
    </script><br />
<br />
        <button type="button" class="btn" onClick="ObterPag1();">Página 1</button><br />
        <button type="button" class="btn" onClick="ObterPag2();">Página 2</button><br />
        <button type="button" class="btn" onClick="ObterPag3();">Página 3</button>